import code from "./base64.js";
let Vote = {
  title: "canvas生成图片",
  nickname: "善良的小魏丶",
  base64: {
    code: code
  }
};

Page({
  /**
   * 页面的初始数据
   */
  data: {
    param: null,
    canvasId: "canvasId",
    isShare: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {},

  onClick() {
    Vote.draw = name => console.log(name);
    const options = {
      width: 256,
      height: 324,
      bgColor: "#fff",
      images: {
        avatar:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578634913530&di=2f6fb025a2ea9926e3c2334d64d3ef3b&imgtype=0&src=http%3A%2F%2Fwww.17qq.com%2Fimg_qqtouxiang%2F86133200.jpeg",
        bg:
          "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3068857160,900366826&fm=11&gp=0.jpg",
        code: "https://i.loli.net/2019/09/19/5mbTzMnyrV2GQ87.jpg"
      },
      base64: {
        code: Vote.base64.code
      }
    };
    this.setData({
      options,
      canvasId: "canvas1",
      isShare: !this.data.isShare
    });
  },

  onCanvasDraw(e) {
    let { ctx, canvasDraw, data } = e.detail;
    let obj = Vote;
    let images = data.images;
    let base64 = data.base64;
    console.log(base64);
    // 背景
    let ratio = canvasDraw.px2rem(
      (canvasDraw.width - canvasDraw.px2rem(30)) /
        (images.bg.width / images.bg.height)
    );
    let isTop =
      canvasDraw.width - canvasDraw.px2rem(30) > ratio ? 0 : -(ratio * 0.25);
    ctx.save();
    ctx.beginPath();
    ctx.rect(
      canvasDraw.px2rem(15),
      canvasDraw.px2rem(15),
      canvasDraw.width - canvasDraw.px2rem(30),
      canvasDraw.width * 0.85 - canvasDraw.px2rem(30)
    );
    ctx.strokeStyle = "rgba(0,0,0,0.1)";
    ctx.fill();
    ctx.stroke();
    ctx.clip();
    ctx.translate(0, isTop);
    ctx.drawImage(
      images.bg.url,
      canvasDraw.px2rem(15),
      canvasDraw.px2rem(15),
      canvasDraw.width - canvasDraw.px2rem(30),
      ratio
    );
    ctx.restore();
    // 小程序二维码
    ctx.drawImage(
      base64.code,
      canvasDraw.width - canvasDraw.px2rem(80),
      canvasDraw.height - canvasDraw.px2rem(80),
      canvasDraw.px2rem(65),
      canvasDraw.px2rem(65)
    );

    let circleW = canvasDraw.px2rem(40);
    let titleH = canvasDraw.height - canvasDraw.px2rem(110);

    canvasDraw.circleImg(
      canvasDraw.ctx,
      images.avatar.url,
      canvasDraw.px2rem(15),
      titleH - canvasDraw.px2rem(13),
      circleW / 2
    );
    let info = `${obj.nickname}正在分享canvas通用方法封装`;
    let num = 15;
    ctx.setFontSize(canvasDraw.px2rem(14));
    ctx.setFillStyle("#333");
    ctx.fillText(
      info.substring(0, num),
      circleW + canvasDraw.px2rem(30),
      titleH + canvasDraw.px2rem(5)
    );
    if (info.length > num) {
      ctx.fillText(
        `${info.substring(num, num + num - 1)}`,
        circleW + canvasDraw.px2rem(30),
        titleH + canvasDraw.px2rem(24)
      );
    }
    // 标题
    ctx.setFontSize(canvasDraw.px2rem(16));
    ctx.setFillStyle("#333");
    ctx.fillText(
      obj.title,
      canvasDraw.px2rem(15),
      canvasDraw.height - canvasDraw.px2rem(40)
    );
    // 次标题
    ctx.setFontSize(canvasDraw.px2rem(14));
    ctx.setFillStyle("#a5a5a5");
    let text = "长按识别小程序码一起玩";
    ctx.fillText(
      text,
      canvasDraw.px2rem(15),
      canvasDraw.height - canvasDraw.px2rem(20)
    );
  },

  onCanvasConfirm(e) {
    console.log("生成图片完成");
    console.log(e.detail);
  },

  onCanvasError(e) {
    console.log(e);
  }
});
